<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Basic Local Data</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Basic Local Data</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>
This example demonstrates how to provide autocomplete suggestions from local data in an array. Since lookups are performed entirely on the client, this example doesn't require any remote requests, and suggestions are displayed almost instantly.
</p>
</div>

<div class="example">
    <div id="demo" class="yui3-skin-sam">
  <label for="ac-input">Enter the name of a US state:</label><br>
  <input id="ac-input" type="text">
</div>

<script>
YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) {
  var states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Dakota',
    'North Carolina',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming'
  ];

  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
    resultFilters    : 'phraseMatch',
    resultHighlighter: 'phraseMatch',
    source           : states
  });
});
</script>

</div>

<h2>HTML</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Enter the name of a US state:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
&lt;&#x2F;div&gt;</pre>


<h2>JavaScript</h2>

<h3>Data</h3>

<pre class="code prettyprint">var states = [
  &#x27;Alabama&#x27;,
  &#x27;Alaska&#x27;,
  &#x27;Arizona&#x27;,
  &#x27;Arkansas&#x27;,
  &#x27;California&#x27;,
  ...
];</pre>


<h3>Implementation</h3>

<pre class="code prettyprint">YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-filters&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
  Y.one(&#x27;#ac-input&#x27;).plug(Y.Plugin.AutoComplete, {
    resultFilters    : &#x27;phraseMatch&#x27;,
    resultHighlighter: &#x27;phraseMatch&#x27;,
    source           : states
  });
});</pre>


<h2>Complete Example Source</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Enter the name of a US state:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
&lt;&#x2F;div&gt;

&lt;script&gt;
YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-filters&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
  var states = [
    &#x27;Alabama&#x27;,
    &#x27;Alaska&#x27;,
    &#x27;Arizona&#x27;,
    &#x27;Arkansas&#x27;,
    &#x27;California&#x27;,
    &#x27;Colorado&#x27;,
    &#x27;Connecticut&#x27;,
    &#x27;Delaware&#x27;,
    &#x27;Florida&#x27;,
    &#x27;Georgia&#x27;,
    &#x27;Hawaii&#x27;,
    &#x27;Idaho&#x27;,
    &#x27;Illinois&#x27;,
    &#x27;Indiana&#x27;,
    &#x27;Iowa&#x27;,
    &#x27;Kansas&#x27;,
    &#x27;Kentucky&#x27;,
    &#x27;Louisiana&#x27;,
    &#x27;Maine&#x27;,
    &#x27;Maryland&#x27;,
    &#x27;Massachusetts&#x27;,
    &#x27;Michigan&#x27;,
    &#x27;Minnesota&#x27;,
    &#x27;Mississippi&#x27;,
    &#x27;Missouri&#x27;,
    &#x27;Montana&#x27;,
    &#x27;Nebraska&#x27;,
    &#x27;Nevada&#x27;,
    &#x27;New Hampshire&#x27;,
    &#x27;New Jersey&#x27;,
    &#x27;New Mexico&#x27;,
    &#x27;New York&#x27;,
    &#x27;North Dakota&#x27;,
    &#x27;North Carolina&#x27;,
    &#x27;Ohio&#x27;,
    &#x27;Oklahoma&#x27;,
    &#x27;Oregon&#x27;,
    &#x27;Pennsylvania&#x27;,
    &#x27;Rhode Island&#x27;,
    &#x27;South Carolina&#x27;,
    &#x27;South Dakota&#x27;,
    &#x27;Tennessee&#x27;,
    &#x27;Texas&#x27;,
    &#x27;Utah&#x27;,
    &#x27;Vermont&#x27;,
    &#x27;Virginia&#x27;,
    &#x27;Washington&#x27;,
    &#x27;West Virginia&#x27;,
    &#x27;Wisconsin&#x27;,
    &#x27;Wyoming&#x27;
  ];

  Y.one(&#x27;#ac-input&#x27;).plug(Y.Plugin.AutoComplete, {
    resultFilters    : &#x27;phraseMatch&#x27;,
    resultHighlighter: &#x27;phraseMatch&#x27;,
    source           : states
  });
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="How to provide autocomplete suggestions from a local array.">
                                        <a href="ac-local.html">Basic Local Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a remote JSONP source.">
                                        <a href="ac-jsonp.html">Remote Data via JSONP</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a YQL query source.">
                                        <a href="ac-yql.html">Remote Data via YQL</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
                                        <a href="ac-datasource.html">Remote Data via DataSource</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to implement delimited tag completion.">
                                        <a href="ac-tagging.html">Tag Completion Using Query Delimiters</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.">
                                        <a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use autocomplete-base to filter a set of existing items on a page.">
                                        <a href="ac-filter.html">Filter a Set of Existing Items on a Page</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
